<style lang="scss" scoped>
.code {
  width: 50vw;
  background-color: white;
  padding: 2vh 3vw;
  border-radius: 10px;
  h5 {
    text-align: center;
  }
  input {
    display: block;
    margin: 2vh auto;
    padding: 0.5vh 1vw;
    border: none;
    border-bottom: 1px solid gray;
  }
  button {
    width: 50%;
    display: block;
    margin: auto;
    padding: 0.2vh 0;
  }
}
</style>
<template>
  <transition name="fade">
    <div class="code">
      <h5>请输入兑换码</h5>
      <input v-model="code" placeholder="输入兑换码" />
      <button class="btn" type="button" @click="getCode">确认</button>
    </div>
  </transition>
</template>
<script setup>
const { ref, defineEmits } = Vue;
const emit = defineEmits(["close"]);
const code = ref("");
// ===== 兑换码功能 =====
const getCode = () => {
  if (!code.value) return alert("请输入兑换码！");
  axios
    .post("/s/yxj/redeem", new URLSearchParams({ code: code.value }))
    .then((res) => {
      emit("close");
      alert("兑换成功");
    });
};
</script>
